<template>
    <div style="max-width: 30rem; margin: 0 auto;background-color: #F0F0F0">
        <!-- 产品搜索 -->
        <div style="background-color: #008CA0;">
            <van-row justify="end">
                <van-col span="8">
                    <div style="height: 3rem;">
                        <img src="/src/assets/logo_bk.png" alt="" style="height: 100%;">
                    </div>
                </van-col>
                <van-col span="15">
                    <van-search
                        v-model="search"
                        shape="round"
                        background="#008CA0"
                        placeholder="请输入搜索关键词"
                        @search="searchResult"
                    />
                </van-col>
            </van-row>
        </div>
        <!-- 轮播图 -->
        <div>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in lunBoData" :key="index">
                    <img :src="item.cover" alt="" style="height: 100%;" @click="linkLunBoDetail(item)">
                </van-swipe-item>
            </van-swipe>
        </div> 
        <!-- 展示版块 -->
        <!-- <div style="margin-top: 10px; background-color: #fff; height: 100px; padding-top: 20px;">
            <van-row justify="space-around">
                <van-col span="3" style="text-align: center;" @click="()=>router.push({path: '/m/about'})">
                    <div class="bty-col" style="background: linear-gradient(to right, rgb(54, 209, 220), rgb(91, 134, 229));">
                        <span class="iicon iconfont icon-gongsijianjie1" style="color: #F0F0F0; font-size: 2.6rem;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">公司简介</span>    
                </van-col>
                <van-col span="3" style="text-align: center;" @click="()=>router.push({path: '/m/technology'})">
                    <div class="bty-col" style="background: linear-gradient(to right, rgb(33, 147, 176), rgb(109, 213, 237));">
                        <span class="icon iconfont icon-jishufuwu" style="color: #fff;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">技术服务</span>    
                </van-col>
                <van-col span="3" style="text-align: center;" @click="()=>router.push({path: '/m/product'})">
                    <div class="bty-col" style="background: linear-gradient(to right, rgb(54, 209, 220), rgb(91, 134, 229));" >
                        <span class="icon iconfont icon-group-type-commerce" style="color: #F0F0F0;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">订购中心</span>    
                </van-col>
                <van-col span="3" style="text-align: center;" @click="()=>router.push({path: '/m/question'})">
                    <div class="bty-col" style="background: linear-gradient(to right, rgb(33, 147, 176), rgb(109, 213, 237));" >
                        <span class="icon iconfont icon-jishufuwushang" style="color: #F0F0F0;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">技术咨询</span>    
                </van-col>
                <van-col span="3" style="text-align: center;" @click="()=>router.push({path: '/m/promotion'})">
                    <div class="bty-col" style="background: linear-gradient(to right, rgb(54, 209, 220), rgb(91, 134, 229));">
                        <span class="icon iconfont icon-cuxiaohuodong-danpinmanjiusong" style="color: #F0F0F0;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">促销活动</span>    
                </van-col>

            </van-row>            
        </div> -->
        <!-- 展示产品 -->
        <div style="margin-top: 10px; background-color: #fff; height: 14rem; padding-top: 30px;">
            <van-row justify="space-between">
                <van-col span="4" class="van-col-product" @click="() => router.push({path: '/m/productList', query: {'id': 1, 'title': '免疫学'}})">
                    <div class="bty-col" >
                        <span class="icon iconfont icon-jianyan-mianyixuelei" style="color: #fff;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">免疫学</span>    
                </van-col>
                <van-col span="4" class="van-col-product" @click="() => router.push({path: '/m/productList', query: {'id': 2, 'title': '免疫学'}})">
                    <div class="bty-col" >
                        <span class="icon iconfont icon-danbaizhi" style="color: #fff;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">蛋白组学</span>    
                </van-col>
                <van-col span="4" class="van-col-product" @click="() => router.push({path: '/m/productList', query: {'id': 3, 'title': '细胞生物学'}})">
                    <div class="bty-col" >
                        <span class="icon iconfont icon-weishengwu" style="color: #fff;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">细胞生物学</span>    
                </van-col>
                <van-col span="4" class="van-col-product" @click="() => router.push({path: '/m/productList', query: {'id': 4, 'title': '分子生物学'}})">
                    <div class="bty-col" >
                        <span class="icon iconfont icon-dady-wuchuangjiyin-zuobian" style="color: #fff;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">分子生物学</span>    
                </van-col>
                <van-col span="4" class="van-col-product" @click="() => router.push({path: '/m/productList', query: {'id': 5, 'title': '通用产品'}})">
                    <div class="bty-col" >
                        <span class="icon iconfont icon-ordinary" style="color: #fff;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">通用产品</span>    
                </van-col>
                <van-col span="4" class="van-col-product" @click="() => router.push({path: '/m/productList', query: {'id': 6, 'title': '其它试剂'}})">
                    <div class="bty-col" >
                        <span class="icon iconfont icon-huaxueshiji-" style="color: #fff;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">其它试剂</span>    
                </van-col>
                <van-col span="4" class="van-col-product" @click="() => router.push({path: '/m/productList', query: {'id': 7, 'title': '其它相关耗材'}})">
                    <div class="bty-col" >
                        <span class="icon iconfont icon-a-013-medicalassistance" style="color: #fff;"></span>
                    </div>
                    <span style="display: block; font-size: 12px;">其它相关耗材</span>    
                </van-col>
            </van-row>            
        </div>
        <!-- 新品推荐 -->
        <div style="margin-top: 10px; background-color: #fff; height: 15rem; padding: 20px 10px;">
            <div style="margin-bottom: 10px; padding: 1px 10px;">
                <van-tag round type="primary" size="large" style="background-color: #008CA0; width: 4rem; font-size: 1rem; height: 1.2rem;">新品推荐</van-tag>
                <span style="float: right; margin-right: 20px;" @click="() => router.push({path: '/m/product'})">更多 > </span>                
            </div>
            <div v-for="(item, index) in product" :key="index" style="margin: 1rem;" @click="()=>router.push({path: '/m/productDetail', query: {'id': item.id}})">
                <span style="display: inline-block; width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{ item.title }}</span>
                <span style="width: 30%;">{{ item.addtime }}</span>
            </div>
        </div>
        <!-- 新闻信息 -->
        <div style="margin-top: 10px; background-color: #fff; height: 15rem; padding: 20px 10px; margin-bottom: 1rem;">
            <div style="padding: 1px 10px;">
                <van-tag round type="primary" size="large" style="background-color: #008CA0; width: 4rem; font-size: 1rem; height: 1.2rem;">公司新闻</van-tag>               
            </div>
            <van-image
                height="100%"
                fit="contain"
                :src="firstNews.cover"
                @click="() => router.push({path: '/m/news', query: {'id': firstNews.id}})"
            />
        </div>
    </div>
    <BtyTabBar/>
</template>


<script setup>
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { lunboList, getTopThree, getNewsProduct } from '@/requests';
import BtyTabBar from '@/components/BtyTabBar.vue';
import { inputEmits } from 'element-plus';
const router = useRouter();
const active = ref();
const search = ref();
const news = ref();
const firstNews = ref({
    "id": 0,
    "title": "",
    "cover": ""
});
const product = ref();
// 获取轮播图
const lunBoData = ref();
const getLunBoData = async () => {
  const res = await lunboList();
  if (res.status === 2000) {
    lunBoData.value = res.data;
  } else {
    console.log("获取轮播失败");
  }
}
getLunBoData();
// 获取新产品
const forNewsProduct = async ()=>{
  const res = await getNewsProduct();
  if (res.status === 2000){
    news.value = res.data.news;
    product.value = res.data.product;
    firstNews.value = res.data.app_news;
  }
}
forNewsProduct();

// 搜索
const searchResult = ()=>{
    router.push({path: '/m/search', query: {content: search.value}})
}

// 轮播图跳转到两点
const linkLunBoDetail = (item)=>{
    router.push({path: '/m/productDetail', query: {id: item.id}})
}
</script>

<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 15rem;
    text-align: center;
    background-color: #008CA0;
  }
  .bty-col{
    background: linear-gradient(to right, rgb(17, 153, 142), rgb(56, 239, 125));
    text-align: center;
    height: 3.5rem;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    aspect-ratio: 1 / 1;
  }
  .bty-col span{
    font-size: 3.1rem;
  }
  .van-col-product{
    text-align: center; 
    padding: 0 10px; 
    margin-bottom: 15px;
  }
</style>